<template>
  <mescroll-vue ref="mescroll" :down="mescrollDown" @init="mescrollInit">
    <!--mescroll滚动区域的基本结构-->
    <!--内容...-->
    <div class="student_orderList">
      <el-col v-for="(item, index) in orderList" :key="index">
        <el-card shadow="never">
          <p class="endTime">{{ item.createdTime }}</p>
          <span class="faultClass">{{ item.faultClass }}</span>
          <i
            :class="[
              'iconfont orderIcon',
              item.state == 1 ? 'icon-dengdai' : 'icon-chaxun'
            ]"
          ></i>
          <el-button type="text" class="showDetails" @click="orderPass(item)"
            >点击查看详情</el-button
          >
        </el-card>
      </el-col>
    </div>
  </mescroll-vue>
</template>

<script>
// 引入mescroll的vue组件
// 文档：http://www.mescroll.com/api.html#begin
import MescrollVue from 'mescroll.js/mescroll.vue'
export default {
  components: {
    MescrollVue // 注册mescroll组件
  },
  created() {
    // 一开始获取订单列表
    this.getData()
  },
  data() {
    return {
      mescroll: null, // mescroll实例对象
      mescrollDown: {
        callback: this.downCallback
      },
      grade: 7,
      orderIocn: '',
      orderList: [
        {
          fixTableId: '',
          contacts: '',
          address: '',
          createdTime: '',
          phone: '',
          faultClass: '',
          faultDetail: '',
          workId: '',
          state: '',
          urls: []
        }
      ]
    }
  },
  methods: {
    getData() {
      this.$http
        .get('student/order')
        .then(res => {
          this.orderList = res.data.data
          // 再排序一下数组（正在处理的状态置顶）
          this.orderList.sort((a, b) => {
            return b.state - a.state
          })
          // 处理图片地址
          for (const item of this.orderList) {
            item.createdTime = this.getLocalTime(item.createdTime)
            if (item.urls !== null && item.urls.length > 3) {
              item.urls = item.urls.split(' ')
            }
          }
        })
        .catch(error => {
          console.log(error)
          return this.$message.error('获取订单列表失败')
        })
    },
    mescrollInit(mescroll) {
      this.mescroll = mescroll // 如果this.mescroll对象没有使用到,则mescrollInit可以不用配置
    },
    downCallback() {
      setTimeout(() => {
        this.getData()
        this.mescroll.endSuccess()
      }, 1000)
    },
    orderPass(item) {
      this.$router.push({
        // 这里必须使用 name，不能使用 path
        name: 'detailsPage',
        params: {
          item: item
        }
      })
    },
    getLocalTime(nS) {
      return new Date(parseInt(nS)).toLocaleString().replace(/:\d{1,2}$/, ' ')
    }
  }
}
</script>

<style  lang="less" scoped>
.student_orderList:after {
  content: '';
  /*转换为一个块元素*/
  display: block;
  /*清除两侧的浮动*/
  clear: both;
}

/deep/ .el-dialog {
  border-radius: 10px;
  box-shadow: 0 0 10px rgba(58, 58, 58, 0.596);
  .el-dialog__body {
    padding: 10px 20px;
  }
  .orderItem {
    span {
      display: block;
      text-align: center;
    }
    span:first-child {
      font-size: 15px;
      margin-top: 8px;
      font-weight: bold;
    }

    span:last-child {
      color: rgb(129, 129, 129);
    }
  }
}

.el-card {
  width: 99%;
  height: 150px;
  box-shadow: 0 3px 3px rgb(207, 207, 207);
  border-radius: 20px;
  margin-top: 5%;
  position: relative;
  .endTime {
    font-size: 10px;
    position: absolute;
    right: 10%;
    color: #9a9d9d;
  }
  .faultClass {
    font-size: 20px;
    font-weight: bold;
  }
  .orderIcon {
    display: block;
    margin-top: 20px;
    margin-left: 20px;
    font-size: 50px;
  }

  .icon-dengdai {
    color: #65a9dd;
  }

  .icon-chaxun {
    color: #add374;
  }

  .showDetails {
    position: absolute;
    right: 10%;
    bottom: 15%;
  }
}
</style>
